<template>
	<view>
		<view class="com-form">
		
			<view class="com-form-item">
				<view class="label">所在地区：</view>
				<view class="inputbox">
					<region-picker @change="region_change" jsonPath="All">
						<view class="picker"><input disabled="disable" class="uni-input" placeholder="请选择地区" placeholder-style="color:#cecece" v-model="areaCity" />
						</view>
					</region-picker>
				</view>
			</view>
			<view class="com-form-item">
				<view class="label">详细地址：</view>
				<view class="inputbox">
					<input v-model="address" placeholder-style="color:#cecece" placeholder="街道、楼栋、门牌号等" />
				</view>
			</view>
			
		</view>
		<view class="com-btn" @click="add">
			<button>添加地址</button>
		</view>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"

	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				mobile: '',
				name: '',
				provinceId: '',
				areaId: '',
				cityId: '',
				address: '',
				isDefault: '1',
				areaCity: '',
				pname:'',
				cname:'',
				aname:'',
				type:1
			}
		},

		onLoad(option) {
			this.type = option.type;
			console.info("==type=="+option.type)
		},
		methods: {

			region_change(e) {
				console.log("=============");
				console.log(e);
				let code = e.detail.code;
				let value = e.detail.value;
				let id = e.detail.id;
				this.provinceId = id[0];
				this.cityId = id[1];
				this.areaId = id[2];
				this.areaCity = value[0] + value[1] + value[2];
				this.pname = value[0];
				this.cname = value[1];
				this.aname = value[2];
				
				

			},
			add() {
			
				if (this.provinceId == '') {

					this.$util.$showToast('请选择城市', '', 'none');
					return;
				}
				if (this.address == '') {

					this.$util.$showToast('请填入地址', '', 'none');
					return;
				}

				let param = {
					detail: this.address,
					areaId: this.areaId,
					provinceId: this.provinceId,
					cityId: this.cityId,
					provinceName:this.pname,
					cityName:this.cname,
					areaName:this.aname
				}
				let that = this;
				this.$api.addWorkAddress(param).then(res => {
					if (res.code == 1) {
						that.$util.$setStorageSync("addressValue", this.pname+this.cname+this.aname+this.address);
						that.$util.$setStorageSync("address", res.data);
						uni.navigateBack({
							delta:1
						})
					}else{
						this.$util.$showToast(res.msg, '', 'none');
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.com-form {
		background:#FFFFFF;

		.com-form-item {
			padding: 20rpx 0;
			margin: 0 20rpx;
			display: flex;
			border-bottom: 1rpx solid #EFEFEF;
			height: 70rpx;

			.label {
				font-size: 28rpx;
				color: #666666;
				margin-top: 15rpx;
				width: 150rpx;
			}

			.inputbox {
				flex: auto;
				height: 70rpx;
				line-height: 70rpx;
				text-align: left;
				padding: 0 40rpx 0 20rpx;

				input {
					height: 70rpx;
					line-height: 70rpx;
					width: 100%;
					padding: 0 0 0 20rpx;
					color: #333333;
					font-size: 28rpx;
				}
			}
		}

		.com-form-item:last-child {
			border-bottom: none;
		}

		.com-form-item2 {
			border-bottom: 1rpx solid #EFEFEF;
			border-top: 20rpx solid #EFEFEF;
			display: flex;
			padding: 20rpx 0;

			.label {
				font-size: 28rpx;
				color: #666666;
				padding: 20rpx;
				flex: auto;
			}

			switch {
				text-align: right;
				margin-top: 5rpx;
			}
		}
	}
</style>
